<template>
  <div>
    <van-collapse v-model="activeName" accordion>
      <van-collapse-item title="未完成" name="1">
        <div
          v-for="(item, index) in $store.state.xxjsb"
          :key="index"
          v-show="item.state == 0"
        >
          <input
            type="checkbox"
            @click="ln_age(index)"
            :checked="item.state !== 0"
          />
          <span>{{ item.title }}</span>
          <button @click="cancel(index)">取消</button>
        </div>
      </van-collapse-item>
      <van-collapse-item title="已完成" name="2">
        <div
          v-for="(item, index) in $store.state.xxjsb"
          :key="index"
          v-show="item.state == 1"
        >
          <input
            type="checkbox"
            @click="ln_age(index)"
            :checked="item.state == 1"
          />
          <span>{{ item.title }}</span>
          ===
          <span>{{ item.time }}</span>
        </div>
      </van-collapse-item>
      <van-collapse-item title="已取消" name="3"
        ><div
          v-for="(item, index) in $store.state.xxjsb"
          :key="index"
          v-show="item.state == 2"
        >
          <s>{{ item.title }}</s>
          <button @click="cancel(index)">恢复</button>
        </div></van-collapse-item
      >
    </van-collapse>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeName: 1,
    };
  },
  methods: {
    ln_age(index) {
      this.$store.commit("ln_age", index);
    },
    cancel(index) {
      this.$store.commit("cancel", index);
    },
  },
};
</script>
